<style lang="less" scoped>
body{
  margin: 0px;
}
.al_data{
  background: white;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  width: 800px;
  margin: auto;
  // width: 100vw;
  // font-size: 0px;
  .xl_img{
    height: 100%;
    margin: 0px;
  }
  .xl_data{
    width: 100%;
  }
  .xiazai{
    background-image: url(../../../images/xiazai.png);
    background-size:100% 100%;
    width:177px;
    height: 59px;
    margin-left: 810px;
    cursor:pointer;
  }
}
</style>
<template>
  <div class="xl">
    <MainUser></MainUser>
    <div v-if="size>6" style="height:3.2vw"></div>
    <affix v-if="size>6" style="margin-top:-3.2vw">
      <MainTitle @sousuo="titleSousuo"></MainTitle>
    </affix>
    <MainTitle v-if="size<=6" @sousuo="titleSousuo"></MainTitle>
    <div class="al_data">
      <!-- <img v-for="item in seriesgallerydata" class="xl_img" :src="item.thumb"/> -->
      <!-- <img  class="xl_img" :src="seriesgallerydata.thumb"/> -->
      <affix :offset="height*0.3">
        <div class="xiazai" @click="download(cadgallerydata.attachment)"></div>
      </affix>
      <div class="xl_img" v-html="cadgallerydata.detailed_desc"/>
      
      
      <!-- <el-link type="primary" @click="download(cadgallerydata.attachment)">下载附件</el-link> -->
      <div style="height:3vw;"></div>
    </div>
    
  </div>
</template>
<script>
const link = document.createElement('a')
import { cadgallery,assumeRole } from '@/request/api';
import MainTitle from '../main_title'
import MainUser from '../main_user'
export default {
    data() {
        return {
          id:'',
          height:window.screen.height,
          cadgallerydata:{},
          keywords:'',
          size:0,
        }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.getcadgallerydata();
      this.getAssumeRole();
    },
    methods: {
      //获取系列列表数据
      getcadgallerydata(){
        
        cadgallery({id:this.id}).then(res => {
          this.loading = false;
          if(res.ok){
              this.cadgallerydata = res.data;
          }
        })
      },
      getAssumeRole(){
          assumeRole({}).then(res => {
              if(res.ok){
                  var assumedata = res.data.res;
                  let OSS = require('ali-oss');
                  this.client = new OSS({
                      // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
                      region: 'oss-cn-qingdao',
                      // 从STS服务获取的临时访问凭证。临时访问凭证包括临时访问密钥（AccessKeyId和AccessKeySecret）和安全令牌（SecurityToken）。
                      accessKeyId: assumedata.Credentials.AccessKeyId,
                      accessKeySecret: assumedata.Credentials.AccessKeySecret,
                      stsToken: assumedata.Credentials.SecurityToken	,
                      // 填写Bucket名称。
                      bucket: 'kny-sxy'
                  });
              }
            })

      },
      download(question){
          var extention = question.split('/').pop();
          // 配置响应头实现通过URL访问时自动下载文件，并设置下载后的文件名。
          const filename = extention // 自定义下载后的文件名。
          const response = {
              'content-disposition': `attachment; filename=${encodeURIComponent(filename)}`
          }
          // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
          const url = this.client.signatureUrl(question, { response });
          link.href = url;
          link.click() // 下载文件
          URL.revokeObjectURL(url); // 释放内存
      },
      titleSousuo(keywords){
        this.keywords = keywords;
        this.$router.push({ name: 'jlb_cad' ,query: {'keywords': keywords}});
      }
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
